<template>
  <div class="todo todoThingLine">
    <div class="todoThingLineLeft">
      <el-checkbox v-model="todo.done" size="large" />
      <span v-show="!todo.isEdit" class="doingTitle">{{ todo.title }}</span>
      <el-input
        class="w-50 m-2 editInput"
        v-model="newTitle"
        placeholder="Please input"
        v-show="todo.isEdit"
        size="small"
        autofocus="autofocus"
        @blur="editChange(todo.id, newTitle)"
      />
    </div>

    <div class="btns">
      <el-button
        type="primary"
        :icon="Edit"
        size="small"
        @click="EditOpen"
        circle
      />
      <el-button
        type="danger"
        :icon="Delete"
        size="small"
        @click="todoDelete(todo.id)"
        circle
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit } from "@element-plus/icons-vue";
import { ref, inject } from "vue";

const props = defineProps({
  todo: Object,
  AppChange: Function,
  AppDelete: Function,
});
let newTitle = ref(props.todo.title);
type todo = {
  id: string;
  title: string;
  done: boolean;
};
let todos = inject("todos");
function EditOpen() {
  props.todo.isEdit = true;
}
function editChange(id: string, title: string) {
  props.todo.isEdit = false;
  //传新的title和id给app
  props.AppChange(id, title);
}
function todoDelete(id: string) {
  console.log("54");
  props.AppDelete(id);
}
</script>
<style scoped>
.todoThingLine {
  width: 100%;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding-left: 20px;
  justify-content: space-between;
}
.todoThingLineLeft {
  display: flex;
  align-items: center;
}
.todoThingLineLeft .editInput {
  margin-left: 5px;
}
.todoThingLine:hover {
  background-color: #f1f1f1;
}
.todoThingLine:hover .btns {
  display: block;
}
.todoThingLine .btns {
  margin-right: 20px;
  display: none;
}
.doingTitle {
  margin-left: 5px;
}
</style>
